feat(ui): add ⌘+K command palette for quick nav and actions by serhalp · Pull Request #2159 · npmx-dev/npmx.dev

serhalp · 2026-03-20T01:42:39Z

🔗 Linked issue

closes #81

supersedes stale #470

🧭 Context

npmx already exposes a ton of useful capabilities (with way more to come), but they require quite a bit of precise clicking around. We always imagined npmx as a power tool for power users. The command palette is a familiar solution to provide discoverable, fast, efficient, repeatable access to an app's capabilities.

📚 Description

This PR adds a command palette with access to every page, every action, and every capability of npmx.

It can be opened from anywhere in the app by pressing ⌘+K on macOS / Ctrl+K on Windows/Linux, or by clicking the new "quick actions" nav item in the header.

The palette includes a set of "global" commands and a composable allowing a page or component to register specific commands that should be made available when that page/component is visible.

The palette supports multi-step flows, such as "change language" → languages are listed.

I should've maybe kept this PR small and added more commands later, but... oops, I believe I covered every single page and capability:

All commands

Global commands (always available)

navigation
- search
- home
- compare
- settings
- my packages if npm is connected
- my orgs if npm is connected
- my profile if atproto is connected
connections
- connect to npm cli if npm not connected
- connect to atmosphere if atproto not connected
- disconnect npm if npm is connected
- disconnect atmosphere if atproto is connected
settings
- language → second step lists all languages + "Help translate" CTA
  - note: there's some magic here to match user input on languages directly on the first screen too!
- relative dates
- use system theme
- use light theme
- use dark theme
- accent colors → second step lists all accent colors
- background shade -> second step lists all bg shades
help
- keyboard shortcuts
- docs
- chat
npmx
- about
- blog
- privacy
- accessibility
- docs
- chat
- builders
- source
- social

Package context

All pages with a package context also include:

package ()
- copy package name
- package page
- docs
- code
- compare this package
- download tarball
- diff
versions of
- <... every version of this package ...>

Package page

package
- copy install command
- copy run command if available
- copy create command if available
- go to types package if available
- go to create package if available
- open skills modal if available
links
- fund if available
- repo (): <owner/repo>
- repo stars
- repo forks
- homepage
- issues
- npm
- jsr if available
- <... every playground ...>

Package code page

actions
- copy link
- copy file contents
- preview
- code

Package diff page

actions
- merge modified lines on/off
- word wrap on/off

Compare page

select all facets
deselect all facets
copy table
table
charts

Profile page

actions
- edit profile if viewing profile
- share invite
links
- profile-website if profile has a website

There are two behaviours worth calling out separately:

When the user's query is a valid semver range specifier, while in a package context, the package versions listed in the palette are filtered to those that match the semver range.
A fallback item always shows up last in the palette results: Search for "<query>". Selecting this submits a search for the user's query.

The palette has full keyboard navigation support and screen reader support.

Screenshots

New header nav item (desktop)

Screenshot 2026-03-22 at 14-41-06 npmx - Package Browser for the npm Registry

Global commands (desktop)

Global commands — logged in via atproto (desktop)

Global commands (mobile, light)

Languages (desktop)

Accent colors (desktop)

Background shades (desktop, light)

New header nav item (desktop, non-homepage)

Screenshot 2026-03-22 at 14-43-30 vite - npmx

Package page commands (desktop)

Package page - input is valid semver (desktop)

Package code page (desktop)

Package diff page (desktop)

Compare page (desktop)

Profile page (desktop)

"Search for" fallback command (desktop)

Future work

This PR was huge enough as is, so I punted on adding hotkeys for quickly triggering commands within the command palette (e.g. typing r and hitting Enter to open the package's repo right away). We should probably do this eventually.
I didn't add any palette commands for package/user/org management stuff that users can do when logged in via npm CLI. We should probably do this eventually.

vercel · 2026-03-20T01:42:46Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Apr 1, 2026 1:18am
npmx.dev	Ready	Preview, Comment	Apr 1, 2026 1:18am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Apr 1, 2026 1:18am

github-actions · 2026-03-20T01:43:24Z

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/en.json	Source changed, localizations will be marked as outdated.
i18n/locales/fr-FR.json	Localization changed, will be marked as complete. 🔄️

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

codecov · 2026-03-20T01:43:41Z

Codecov Report

❌ Patch coverage is 80.93023% with 164 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/composables/useCommandPaletteGlobalCommands.ts	79.01%	34 Missing ⚠️
[...[org]]/[packageName]/v/[version]/[...filePath].vue](https://app.codecov.io/gh/npmx-dev/npmx.dev/pull/2159?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=npmx-dev#diff-YXBwL3BhZ2VzL3BhY2thZ2UtY29kZS9bW29yZ11dL1twYWNrYWdlTmFtZV0vdi9bdmVyc2lvbl0vWy4uLmZpbGVQYXRoXS52dWU=)	0.00%	25 Missing and 7 partials ⚠️
app/components/CommandPalette.client.vue	85.18%	16 Missing and 4 partials ⚠️
app/pages/compare.vue	31.81%	13 Missing and 2 partials ⚠️
app/components/Terminal/Install.vue	55.55%	8 Missing ⚠️
app/pages/package/[[org]]/[name].vue	0.00%	6 Missing and 2 partials ⚠️
app/components/Diff/ViewerPanel.vue	50.00%	6 Missing ⚠️
app/components/Package/Header.vue	66.66%	6 Missing ⚠️
app/composables/useCommandPalette.ts	95.52%	5 Missing and 1 partial ⚠️
shared/utils/url.ts	25.00%	5 Missing and 1 partial ⚠️
... and 9 more

📢 Thoughts on this report? Let us know!

trueberryless · 2026-03-21T07:42:04Z

I love it, super clean and useful! 🥳

Trying to collapse them was causing more problems than it solved.

serhalp · 2026-03-29T23:42:17Z

2. Navigation from [compare](https://npmx-1pgebu46f-npmx.vercel.app/compare?facets=packageSize) _and other pages_ to search doesn't work

D'oh, good catch, thanks! I broke this when I added the "Search for $query" fallback item. I should've made this a separate palette command entirely.
13e6fab

3. Keyboard shortcut does nothing too

🤦🏼 wow I broke a lot of things at the last minute before putting this up for review, oof.
e797864

4. I would like to see some response that action was successful (like "package name copied" toast) - but it's probably better to postpone to the next iteration

🙏🏼 yes let's iterate on this please.

5. I can copy table on compare page even if there are only one package selected (should work only after two)

Damn, another good catch.
e867eb1

6. The language selected via the command panel is reset after reload

Good catch! Fixed in 3e2e8a5. We should refactor that.

serhalp · 2026-03-30T00:28:48Z

UI/UX details

Strange scroll behavior

How about just make header sticky and have scroll on whole dialog?

🤔 https://github.com/user-attachments/assets/85c7527f-0030-404f-8d2d-6f4db5e18a00

7. Some options (links without badges) not in the center vertically

fixed in 2c67363

serhalp · 2026-03-30T00:40:05Z

@knowler I think I've got all the 32393942 palette commands triggering appropriate SR announcements now 🙏🏼

alexdln · 2026-03-30T12:15:47Z

app/components/Settings/AccentColorPicker.vue

        name="accent-color"
        class="sr-only"
        :value="color.id"
-        :checked="selectedAccentColor === color.id || (!selectedAccentColor && color.id === 'sky')"


Looks like still broken for a bit

Should show sky on first visit

oof, I need to slow down. here we go: e86c3b2.

Looks like change to neutral doesn't work now

Maybe just misunderstanding - It's not like "clean and restore to default", it's "no color"/"neutral color"

alexdln · 2026-03-30T12:20:01Z

Have you pushed all the changes or is it some specific case on mine side only? Let me know if you need more context about the [first point in previous comment](https://github.com//pull/2159#issuecomment-4148167952) - there are two scrolls and the second one scrolls to nowhere.

app/composables/useCommandPalettePackageVersions.ts

serhalp · 2026-03-31T23:47:26Z

Have you pushed all the changes or is it some specific case on mine side only? Let me know if you need more context about the first point in previous comment - there are two scrolls and the second one scrolls to nowhere.

I haven't pushed anything for this, no.

I wasn't able to reproduce it, but now I've just tried it on three browsers and I do see it on Safari 👍🏼. I'll go from there 👀.

We were ending up with both `overflow-y-auto` and `overflow-hidden` and for some reason Safari was resolving this "conflict" by showing two scrollbars.

serhalp · 2026-04-01T01:23:59Z

@alexdln I believe I've fixed it! 8e868d4

serhalp force-pushed the serhalp/cmdk-palette branch from bed7157 to 9fb8bf3 Compare March 20, 2026 01:48

vercel bot deployed to Preview – npmx.dev March 20, 2026 01:51 View deployment

vercel bot deployed to Preview – npmx.dev March 20, 2026 20:35 View deployment

vercel bot deployed to Preview – npmx.dev March 20, 2026 20:38 View deployment

vercel bot deployed to Preview – npmx.dev March 20, 2026 21:43 View deployment

vercel bot deployed to Preview – docs.npmx.dev March 21, 2026 16:15 View deployment

vercel bot deployed to Preview – npmx.dev March 21, 2026 16:16 View deployment

serhalp force-pushed the serhalp/cmdk-palette branch from 3b1e01b to e280565 Compare March 21, 2026 22:25

vercel bot deployed to Preview – docs.npmx.dev March 21, 2026 22:27 View deployment

vercel bot deployed to Preview – npmx.dev March 21, 2026 22:28 View deployment

serhalp force-pushed the serhalp/cmdk-palette branch from e280565 to 10fbdc8 Compare March 22, 2026 01:08

vercel bot deployed to Preview – docs.npmx.dev March 22, 2026 01:10 View deployment

vercel bot deployed to Preview – npmx.dev March 22, 2026 01:10 View deployment

serhalp force-pushed the serhalp/cmdk-palette branch from 10fbdc8 to 15a4d07 Compare March 22, 2026 01:23

vercel bot deployed to Preview – docs.npmx.dev March 22, 2026 01:25 View deployment

vercel bot deployed to Preview – npmx.dev March 22, 2026 01:26 View deployment

serhalp force-pushed the serhalp/cmdk-palette branch from 15a4d07 to f2b53bf Compare March 22, 2026 01:33

vercel bot deployed to Preview – docs.npmx.dev March 22, 2026 01:35 View deployment

vercel bot deployed to Preview – npmx.dev March 22, 2026 01:35 View deployment

serhalp changed the title ~~feat(ui): add ⌘+K command palette for power user fast nav and actions~~ feat(ui): add ⌘+K command palette for quick nav and actions Mar 22, 2026

serhalp force-pushed the serhalp/cmdk-palette branch 2 times, most recently from 6777ee1 to 823c9cf Compare March 22, 2026 02:44

vercel bot deployed to Preview – npmx.dev March 22, 2026 02:46 View deployment

serhalp force-pushed the serhalp/cmdk-palette branch from 823c9cf to 2667fda Compare March 22, 2026 02:49

vercel bot deployed to Preview – npmx.dev March 22, 2026 02:51 View deployment

vercel bot deployed to Preview – npmx.dev March 22, 2026 03:15 View deployment

vercel bot deployed to Preview – npmx.dev March 29, 2026 22:50 View deployment

serhalp added 2 commits March 29, 2026 18:57

fix(a11y): announce more command palette actions

218de39

fix: actually persist selected locale via cmd palette

3e2e8a5

vercel bot deployed to Preview – npmx.dev March 29, 2026 23:05 View deployment

serhalp added 4 commits March 29, 2026 19:23

fix: refactor away i18n key interpolation

3959303

fix: make "Search" nav item and "Search for query" separate

13e6fab

Trying to collapse them was causing more problems than it solved.

test: update test fetch mocks for new calls

471200c

fix: add missing id to keyboard shortcuts modal

e797864

vercel bot deployed to Preview – npmx.dev March 29, 2026 23:36 View deployment

fix: only show copy-markdown command when appropriate

e867eb1

vercel bot deployed to Preview – npmx.dev March 29, 2026 23:44 View deployment

fix: align cmd palette items vertically

2c67363

fix: remove imports from onPrehydrate

f70c603

serhalp requested a review from alexdln March 30, 2026 00:39

serhalp requested a review from knowler March 30, 2026 00:40

vercel bot deployed to Preview – npmx.dev March 30, 2026 00:41 View deployment

alexdln reviewed Mar 30, 2026

View reviewed changes

app/composables/useCommandPalettePackageVersions.ts Outdated Show resolved Hide resolved

serhalp and others added 3 commits March 31, 2026 19:37

fix: actually restore the default accent color

e86c3b2

test: update default accent color in tests

2072386

[autofix.ci] apply automated fixes

7fb4201

serhalp added 3 commits March 31, 2026 21:15

fix: simplify palette package versions loading a bit

112db46

fix: work around double scrollbar Safari bug 🙃

8e868d4

We were ending up with both `overflow-y-auto` and `overflow-hidden` and for some reason Safari was resolving this "conflict" by showing two scrollbars.

Merge remote-tracking branch 'origin/main' into serhalp/cmdk-palette

68956c0

Uh oh!

Conversation

serhalp commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

🧭 Context

📚 Description

Global commands (always available)

Package context

Package page

Package code page

Package diff page

Compare page

Profile page

Screenshots

Future work

Uh oh!

vercel bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

codecov bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

trueberryless commented Mar 21, 2026

Uh oh!

serhalp commented Mar 29, 2026

Uh oh!

serhalp commented Mar 30, 2026

Uh oh!

serhalp commented Mar 30, 2026

Uh oh!

alexdln Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

serhalp Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

alexdln Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexdln commented Mar 30, 2026

Uh oh!

Uh oh!

serhalp commented Mar 31, 2026

Uh oh!

serhalp commented Apr 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

serhalp commented Mar 20, 2026 •

edited

Loading

vercel bot commented Mar 20, 2026 •

edited

Loading

github-actions bot commented Mar 20, 2026 •

edited

Loading

codecov bot commented Mar 20, 2026 •

edited

Loading

alexdln Mar 30, 2026 •

edited

Loading

alexdln Apr 1, 2026 •

edited

Loading